<!doctype html>
<html>

<head>
    <script src="dmxAppConnect/dmxAppConnect.js"></script>
    <!-- Required meta tags -->
    <meta charset="UTF-8">
    <title>游戏 - 在线拼图游戏</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="fontawesome5/css/all.min.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap/4/css/bootstrap.min.css" />
    <!-- Custom CSS styles-->
    <link rel="stylesheet" href="css/style.css" />
    <link href="css/Puzzle.css" rel="stylesheet" type="text/css" />
    <!-- Scripts -->
    <script src="js/jquery-3.5.1.slim.min.js"></script>
    <script src="dmxAppConnect/dmxBootstrap4Navigation/dmxBootstrap4Navigation.js" defer=""></script>
    <script src="dmxAppConnect/dmxBootstrap4Toasts/dmxBootstrap4Toasts.js" defer=""></script>
    <script src="dmxAppConnect/dmxBootbox/bootbox.all.min.js" defer=""></script>
    <script src="dmxAppConnect/dmxBootbox/dmxBootbox.js" defer=""></script>
    <script src="dmxAppConnect/dmxBootstrap4Modal/dmxBootstrap4Modal.js" defer=""></script>
    <!-- User Scripts -->
    <script type="text/javascript">
        // 全局变量
        isCounting = false; 
        game_mode = 0;
        shadowShow = 0; // show the shadow image
        borderOnly = 0; // show border only
        difficulty = 0;
        hint = 0;
        repos = 0;
        magnetCntTimes = 0;
        hintCntTimes = 0;
    </script>
    <script src="assets/js/paper.js" type="text/javascript"></script>
    <script src="assets/js/jigsaw.js" type="text/paperscript" canvas="gameCanvas"></script>
    <script type="text/javascript">
        var secs = 0;
            var mins = 0;
            var hours = 0;
            var timeoutId;
    
            function toNormal(){
                game_mode = 0;
                document.getElementById("showGameMode").innerHTML="正常模式";
            }
    
            function toMagnet(){
                magnetCntTimes++;
                game_mode = 1;
                document.getElementById("showGameMode").innerHTML="磁吸模式";
            }
    
            function showmode(mod) { // change the show mode
                if(mod == 1) {
                    shadowShow = 1 - shadowShow;
                } else if(mod == 2) {
                    borderOnly = 1 - borderOnly;
                } else {
                    borderOnly = 0;
                    shadowShow = 0;
                }
            }
    
            function changeDifficulty(deg) {
                var url = window.location.href;
                url = url.substr(0, url.length - 1);
                window.location.href = url + deg;
            }

            function setHint() {
                if (hint == 0){
                    hint = 1;
                    hintCntTimes++;
                }
            }

            function setRepos() {
                if (repos == 0) {
                    hint = 0;
                    repos = 1;
                }
            }
    
            function getParams(key) {
                    var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
                    var r = window.location.search.substr(1).match(reg);
                    if (r != null) {
                        return decodeURI(r[2]);
                    }
                    return null;
            };
            
            function restartGame(){
                location.reload();
            };
            
            function countTime()
                {
                secs+=1;
                if(secs>=60)
                {
                mins+=1;
                secs = 0;
                }
                if(mins>=60)
                {
                hours+=1;
                mins = 0;
                }
                if(hours>=24)
                {
                hours = 0;
                }
                
                
                document.getElementById("showTime").innerHTML = checkTime(hours) + " : " + checkTime(mins) + " : " + checkTime(secs) ;
            }
            
            function checkTime(time){
                if(time<10) {time="0" +time;} 
                return time; 
            }

            function closeDialog(id) {
                console.log(id);
                document.getElementById(id).setAttribute('style', 'display: none');
            }
            function closePauseDialog(id) {
                console.log(id);
                document.getElementById(id).setAttribute('style', 'display: none');
                start_pause();
            }
            $(window).on('load',function(){ 
                    //添加窗口尺寸改变响应监听
                    $(window).resize(resizeCanvas);
                    //页面加载后先设置一下canvas大小
                    resizeCanvas();
                    // var desiredWidth=$("footer").outerWidth(true)-10;//左右边框各5px
                    // var desiredHeight=$(window).height()-$("nav").outerHeight(true)-$("section#gameInfo").outerHeight(true)-$("section#gameTitle").outerHeight(true);        
                    // $("#gameCanvas").attr("width", desiredWidth); 
                    // $("#gameCanvas").attr("height", desiredHeight);
                    // paper.view.viewSize = new paper.Size(desiredWidth, desiredHeight);
            });
          //窗口尺寸改变响应（修改canvas大小）
          function resizeCanvas() {
            // $("#gameCanvas").attr("width", $(window).get(0).innerWidth);
            // ref: https://www.cnblogs.com/goloving/p/7113567.html
            var desiredWidth=$("footer").outerWidth(true)-60;//左右边框各5px
            var desiredHeight=$(window).height()-$("nav").outerHeight(true)-$("section#gameInfo").outerHeight(true) - 40;
            if(desiredWidth<300){
                desiredWidth=300
            }
            if(desiredHeight<300){
                desiredHeight=300
            }
            // $("#gameCanvas").attr("width", desiredWidth); 
            // $("#gameCanvas").attr("height", desiredHeight);
            paper.view.viewSize = new paper.Size(desiredWidth, desiredHeight);
          };
    </script>

</head>

<body is="dmx-app" id="about">

    <!-- Page content -->
    <div class="modal" id="modal1" is="dmx-bs4-modal" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-dialog-scrollable" role="document" style="max-width:1000px;">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">答案提示&nbsp;</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body text-center">
                    <img id="hintImage">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="index.html"><i class="fa fa-puzzle-piece"></i>&nbsp;在线拼图游戏&nbsp;</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
        <div class="collapse navbar-collapse align-self-start" id="navbarNav">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item pl-2 pr-2"> <a class="nav-link" href="index.html">主页</a> </li>
                <li class="nav-item pl-2 pr-2"> <a class="nav-link" href="upload.html">创建拼图</a> </li>
                <li class="nav-item pl-2 pr-2"> <a class="nav-link" href="about.html">关于</a> </li>
            </ul>
        </div>
    </nav>
    <section class="bg-white" style="padding:10px 10px 10px 20px">
        <div class="container-fluid" style="padding-left:0px;padding-right:0px;">


            <div class="col text-center" style="padding-left:0px;padding-right:0px;">
                <canvas id="gameCanvas" class="gameCanvas" style="display: block; border: thick solid; touch-action: none; background-image: url(assets/images/bg_yellow.jpg);"></canvas>
                <img id="puzzle-image" class="puzzle-image" style="display: none" />
                <img id="background-image" class="background-image" src="assets/images/plank.jpg" style="display: none" />
                <img width="128" height="128" id="empty" style="display: none;" src="assets/images/empty.png" />
            </div>


        </div>

    </section>
    <section id="gameInfo" class="bg-white" style="padding:3px 0 0px">
        <div class="container">

            <div class="row justify-content-center">
                <div class="dropdown">
                    <button id="dropdown1" class="btn btn-secondary" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">难度</button>
                    <ul class="dropdown-menu" aria-labelledby="dropdown1">
                        <li><a class="dropdown-item" onclick="changeDifficulty(0)">随便玩玩</a></li>
                        <li><a class="dropdown-item" onclick="changeDifficulty(1)">消磨时间</a></li>
                        <li><a class="dropdown-item" onclick="changeDifficulty(2)">眼花缭乱</a></li>
                    </ul>
                </div>
                <div class="dropdown">
                    <button id="dropdown2" class="btn btn-secondary" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">显示</button>
                    <ul class="dropdown-menu" aria-labelledby="dropdown2">
                        <li><a class="dropdown-item" onclick="showmode(1)">显示原图</a></li>
                        <li><a class="dropdown-item" onclick="showmode(2)">显示边框</a></li>
                        <li><a class="dropdown-item" onclick="setRepos()">重新排列</a></li>
                    </ul>
                </div>
                <div class="dropdown">
                    <button id="dropdown3" class="btn btn-secondary" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">模式</button>
                    <ul class="dropdown-menu" aria-labelledby="dropdown3">
                        <li><a class="dropdown-item" onclick="toNormal()">正常模式</a></li>
                        <li><a class="dropdown-item" onclick="toMagnet()">磁吸模式</a></li>
                    </ul>
                </div>

                <button id="btnStartPause" class="btn btn-outline-dark" onclick="start_pause()"><i class="fas fa-pause"></i></button>
                <button id="btnRestartGame" class="btn btn-outline-dark" onclick="restartGame()"><i class="fas fa-redo"></i></button>
                <!-- <button id="btnShowHint" class="btn btn-outline-dark" dmx-on:click="modal1.show()"><i class="far fa-lightbulb"></i></button> -->
                <button id="btnShowHint" class="btn btn-outline-dark" onclick="setHint()"><i class="far fa-lightbulb"></i></button>
            </div>
        </div>
        <div class="container">
            <div class="row mt-1 mb-1">
                <div class="col">
                    <p class="small text-left" style="margin-bottom: 0;">游戏计时：<span id="showTime">00 : 00 : 00</span></p>
                    <p class="small text-left" style="margin-bottom: 0;">当前拼图：<span id="showPuzzleName">山清水秀</span></p>
                </div>
                <div class="col">
                    <p class="small text-center" style="margin-bottom: 0;">当前难度：<span id="showDifficulty">随便玩玩</span></p>
                    <p class="small text-center" style="margin-bottom: 0;">当前模式：<span id="showGameMode">正常模式</span></p>
                </div>
            </div>
        </div>
    </section>
    <footer class="bg-dark">
        <div class="container">
            <div class="row">
                <div class="col">
                    <p class="text-center small mb-0 pt-2 pb-2 pl-1 pr-1 text-light">&copy; Copyright 2021. All Rights Reserved.</p>
                </div>
            </div>
        </div>
    </footer>
    <div class="box" id="endDialog">
        <span id="endShow" onclick="closeDialog('endDialog')">Congratulations!</span>
    </div>
    <div class="box" id="pauseDialog">
        <span id="pauseShow" onclick="closePauseDialog('pauseDialog')">Game Paused</span>
    </div>
    <!-- Scripts -->
    <script src="bootstrap/4/js/popper.min.js"></script>
    <script src="bootstrap/4/js/bootstrap.min.js"></script>
    <!-- User Scripts -->
    <script>
        function start_pause(){
            if(isCounting){
            // document.getElementById("gameCanvas").style.display="none";
            // isCounting = false;
            // clearTimeout(timeoutId); //清除指定id计时器
            // document.getElementById("btnStartPause").innerHTML="<i class=\"fas fa-play\"></i>";
            isCounting = false;
            document.getElementById("pauseDialog").setAttribute("style", "display: block;")
            clearTimeout(timeoutId); //清除指定id计时器
            document.getElementById("btnStartPause").innerHTML = "<i class=\"fas fa-play\"></i>";
        }else{
            // document.getElementById("gameCanvas").style.display="block";
            isCounting = true;
            document.getElementById("pauseDialog").setAttribute("style", "display: none;")
            timeoutId = setInterval(countTime, 1000); //指定时间执行任务
            document.getElementById("btnStartPause").innerHTML="<i class=\"fas fa-pause\"></i>";
            }
        }

        $(".puzzle-image").attr('src', getParams("param1"));
        document.getElementById("hintImage").src=getParams("param1");
        document.getElementById("showPuzzleName").innerText=getParams("param2");
        difficulty = getParams("param3");
        if (difficulty == 1) {
            document.getElementById("showDifficulty").innerHTML="消磨时间";
        }
        else if (difficulty == 2) {
            document.getElementById("showDifficulty").innerHTML="眼花缭乱";
        }
        else {
            document.getElementById("showDifficulty").innerHTML="随便玩玩";
        }
        start_pause();
    </script>
</body>

</html>